<!--
功能：图标选择
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-11-21 15:53:30
-->
<template>
  <div>
    <PageTitle
      title="地区选择组件"
      subTitle="二次封装的地区选择组件，返回选中三级地区编码"
    ></PageTitle>
    <div class="page-content">
      <div class="title-box">
        下拉地区选择组件<span style="margin-left: 10px"
          >选中的地区：{{ selectAreaLabel.join('/') }}</span
        >
      </div>
      <SelectArea :value="selectAreaValue" @onConfirm="selectAreaCallback" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const selectAreaValue = ref([])
const selectAreaLabel = ref([])
const selectAreaCallback = (event1, event2) => {
  console.log('选择地区回调')
  console.log(event1)
  console.log(event2)
  selectAreaValue.value = event1
  selectAreaLabel.value = event2
}
</script>
<style lang="scss" scoped>
.page-content {
  box-shadow: 0 0 6px 0 rgba(51, 51, 51, 0.08);
  margin-top: 10px;
  border-radius: 4px;
  padding: 15px;
  background-color: #ffffff;
  .title-box {
    margin-bottom: 10px;
    color: #17233d;
    font-size: 15px;
    font-weight: 600;
  }
}
</style>
